<template>
  <div class="guide-container">
    <!-- 功能展示区 -->
    <div class="function-card">
      <h2 class="main-title">虚拟角色共创平台使用指南</h2>
      <el-collapse v-model="activeNames" accordion class="function-collapse">
        <el-collapse-item v-for="item in navItems" :key="item.key" :name="item.key" class="collapse-item">
          <template #title>
            <div class="collapse-header">
              <el-icon class="item-icon">
                <component :is="item.icon" />
              </el-icon>
              <span class="collapse-title">{{ item.label }}</span>
            </div>
          </template>
          <div class="collapse-content">
            {{ getGuideContent(item.key) }}
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  House,
  User,
  EditPen,
  Files,
  Plus,
  List
} from '@element-plus/icons-vue'

const GUIDE_CONTENT = {
  home: '欢迎来到虚拟角色共创平台！您可以：发布新帖子、浏览热门内容、查看角色档案，并管理自己的创作内容。',

  profile: '个人中心：查看账户信息，管理已创建的角色与发布的帖子。',

  edit: '使用标题与图文编辑器创作帖子，支持自定义排版并添加图片。',

  posts: '浏览所有用户发布的帖子，按时间排序。',

  create: '创建新角色：设定基础属性、外观特征和背景故事。',

  characters: '查看平台全部角色档案,找到你喜欢的角色。',
}

const navItems = [
  { key: 'home', label: '首页', icon: House },
  { key: 'profile', label: '个人信息', icon: User },
  { key: 'edit', label: '编辑写作', icon: EditPen },
  { key: 'posts', label: '帖子列表', icon: Files },
  { key: 'create', label: '创建角色', icon: Plus },
  { key: 'characters', label: '角色列表', icon: List }
]

const getGuideContent = (key) => GUIDE_CONTENT[key] || '功能说明准备中...'

const activeNames = ref(['home'])
</script>

<style>
/* 基础样式 */

.function-card {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.main-title {
  text-align: center;
  color: #2c3e50;
  font-size: 24px;
  padding: 24px 0;
  margin: 0;
  border-bottom: 1px solid #eee;
}

/* 折叠面板样式 */
.collapse-item {
  transition: all 0.3s ease;
  border-bottom: 1px solid #f0f0f0;
}

.collapse-item:last-child {
  border-bottom: none;
}

.collapse-header {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background: #f8f9fa;
  transition: background 0.3s;
}

.collapse-item:hover .collapse-header {
  background: #f1f3f5;
}

.item-icon {
  font-size: 20px;
  color: #3498db;
  margin-right: 12px;
}

.collapse-title {
  font-size: 16px;
  color: #2c3e50;
  font-weight: 500;
}

.collapse-content {
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  background: #fcfdff;
  border-top: 1px solid #f0f0f0;
}

/* Element Plus 组件覆盖 */
.el-collapse-item__header {
  padding: 0 !important;
  background: transparent !important;
}

.el-collapse-item__wrap {
  background: transparent !important;
  border: none !important;
}

.el-collapse {
  border: none !important;
}

.el-collapse-item__arrow {
  margin-right: 24px;
  color: #7f8c8d !important;
}
</style>